import { SendCode } from '@/components/code/SendCode'
import { BmInput } from '@/components/form/BmInput'
import { Button } from '@/components/ui/button'
import { useAuth } from '@/hooks/useAuth'
import { useForm } from '@tanstack/react-form'
import { MenberLayout } from '../MenberLayout'
import { useBindEmailMutation } from '@/services/user'

interface IFormData {
  email: string
  code: string
}

export const Email = () => {
  const { user } = useAuth()
  const bindEmailMutation = useBindEmailMutation<IFormData>()
  const form = useForm({
    defaultValues: {
      email: '',
      code: ''
    },
    onSubmit: ({ value }) => {
      bindEmailMutation.mutate(value)
    }
  })
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        e.stopPropagation()
        form.handleSubmit()
      }}>
      <MenberLayout description={user('email') ? '已经绑定邮箱' + user('email') : '你还没有绑定邮箱'}>
        <SendCode formObject={form as any} action="/user/send-code/email" field="email" />
        <BmInput<IFormData> formObject={form as any} fieldName="code" label="验证码" placeholder="请输入收到的验证码" />
        <Button variant="default">绑定邮箱</Button>
      </MenberLayout>
    </form>
  )
}
